<template>
  <div class="project-detail">
    <div class="material-library">
      <p class="title">材料库</p>
      <el-tree :data="treeData" 
        v-loading="materialLoading"
        node-key="id" 
        :props="defaultProps" 
        @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span v-if="!data.materials">
            <el-button type="text" size="mini" @click="() => append(data)">
              添加
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="content">
      <e-tab :tabData="detailTab" @handleTab="handleTab" @handleEditTab="handleEditTab" @handleDelTab="handleDelTab">
        <template slot="right">
          <el-button type="default" @click="addSpace">添加空间</el-button>
        </template>
      </e-tab>
      <div class="e-table" v-if="!isOther">
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column prop="material.name" label="项目名称">
          </el-table-column>
          <el-table-column prop="material.units" label="单位">
          </el-table-column>
          <el-table-column prop="material.price" label="单价">
          </el-table-column>
          <el-table-column prop="material.remark" label="工艺材料说明">
          </el-table-column>
          <el-table-column prop="quantity" label="用量" width="200">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.quantity" @change="changeQuantity" :min="1"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button @click="toSave(scope.row)" type="text">保存</el-button>
            </template>
          </el-table-column>
        </el-table>
        <e-page :total="tableTotal" @handleCurrentChange="handleCurrentChange"></e-page>
      </div>
      <div v-else>
        <template>
          <el-form  :model="form">
            <el-form-item>
              <el-input v-model="form.customerName" placeholder="客户名">
                <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.contact" placeholder="电话">
                <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.address" placeholder="地址">
                <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.rateName" placeholder="费率项目">
                <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.rate" placeholder="费率值">
                <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.rateRemark"  placeholder="备注说明">
                <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
              </el-input>
            </el-form-item>
            <el-form-item class="form-item-btn">
              <el-button class="long-btn" type="primary" @click="handleForm">保存</el-button>
            </el-form-item>
          </el-form>
        </template>
      </div>
    </div>
    <space-dialog ref="spaceDialog" @addProjectSpace="addProjectSpace" @editProjectSpace="editProjectSpace"></space-dialog>
    <quantity-dialog ref="quantityDialog" @addProjectMaterialSuccess="addProjectMaterialSuccess"></quantity-dialog>
  </div>
</template>

<script>
  import eTab from '@/components/tab';
  import ePage from '@/components/pagination';
  import spaceDialog from './space-dialog';
  import quantityDialog from './quantity-dialog';
  import '@/styles/detail/index.scss';
  import {
    getMaterial,
    getDetailTab,
    getMaterialDetail,
    updateProjectMaterial,
    updateProject,
    projectSpaceUpdate,
    projectSpaceDel,
    projectSpaceInsert,
    getProjectById
  } from '@/utils/api';
  export default {
    components: {
      eTab,
      ePage,
      spaceDialog,
      quantityDialog
    },
    data() {
      return {
        projectId: this.$route.params.id,
        projectSpaceId: '',
        treeData: [],
        defaultProps: { // 配置选项
          children: 'materials',
          label: 'name'
        },
        detailTab: [],
        tableData: [],
        tableTotal: 0,
        page: {
          pageIndex: 0,
          pageSize: 10
        },
        isOther: false,
        form:{},
        materialLoading: false,
        loading: false
      }
    },
    mounted() {
      this.getMaterial();
      this.getDetailTab();
      this.getProjectById();
    },

    methods: {
      toSave(item) {
        console.log(item)
        const params = {
          id: item.id,
          quantity: item.quantity
        }
        updateProjectMaterial(params).then((res) => {
          // TODO验证数字
          if (res) {
            this.$message.success('保存成功');
          }
        })
      },
      addSpace() {
        this.$refs.spaceDialog.openDialog();
      },
      changeQuantity() {

      },
      getMaterial() {
        this.materialLoading = true;
        getMaterial().then((res) => {
          this.materialLoading = false;
          this.treeData = res
        }).catch((err) => {
          this.materialLoading = false;
        })
      },
      getProjectById() {
        getProjectById({
          id: this.projectId
        }).then((res) => {
         this.form = Object.assign({}, res)
        })
      },
      getDetailTab() {
        getDetailTab({
          projectId: this.projectId
        }).then((res) => {
          this.detailTab = res;
          this.detailTab.forEach((item) => {
            item.icon = 'el-icon-edit-outline'
          })
          this.detailTab.push({
            name: '其他设置'
          })
          this.projectSpaceId = this.detailTab[0].id;
          this.getMaterialDetail();
        })
      },
      getMaterialDetail() {
        this.loading = true;
        const params = {
          projectId: this.projectId,
          projectSpaceId: this.projectSpaceId,
          pageIndex: this.page.pageIndex,
          pageSize: this.page.pageSize
        }
        getMaterialDetail(params).then((res) => {
          this.loading = false;
          this.tableData = res.content;
          this.tableTotal = res.totalElements;
        }).catch((err) => {
          this.loading = false;
        })
      },
      handleCurrentChange(val) {
        this.page.pageIndex = val - 1;
        this.getMaterialDetail();
      },
      handleNodeClick(data) {
        console.log(data);
      },
      append(data) {
        this.$refs.quantityDialog.openDialog(data, this.projectId, this.projectSpaceId);
      },
      handleTab(id) {
        if (id) {
          this.isOther = false;
          this.projectSpaceId = id;
          this.getMaterialDetail();
        } else {
          this.isOther = true;
        }
      },
      handleEditTab(item) {
        console.log(item)
        this.$refs.spaceDialog.openDialog(item);
      },
      handleDelTab(value) {
        this.$confirm('确定要删除该空间吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          projectSpaceDel({
            id: value.id
          }).then((res) => {
            this.$message.success('删除成功')
            this.detailTab.forEach((item, index) => {
              if (item.id === value.id) {
                this.detailTab.splice(index, 1);
              }
            })
          })
        }).catch(() => {      
        });
      },
      addProjectSpace(form) {
        const params = {
          // id: this.projectSpaceId,
          projectId: this.projectId,
          name: form.name,
          sort: this.detailTab.length
        }
        projectSpaceInsert(params).then((res) => {
          if (res) {
            this.$message.success('添加成功');
            this.$refs.spaceDialog.closeDialog();
            this.getDetailTab();
          }
        })
      },
      editProjectSpace(form) {
        const params = {
          id: form.id,
          projectId: this.projectId,
          name: form.name
        }
        projectSpaceUpdate(params).then((res) => {
          this.$message.success('修改成功');
          this.$refs.spaceDialog.closeDialog();
          this.getDetailTab();
        })
      },
      addProjectMaterialSuccess() {
        this.getMaterialDetail();
      },
      handleForm() {
       const params = Object.assign({}, this.form, {id: this.projectId});

      if (!params.rateName) {
         this.$message.warning('请填费率名称');
         return false;
       }
       if (!params.rateName) {
         this.$message.warning('请填费率名称');
         return false;
       }
       if (!params.rateName) {
         this.$message.warning('请填费率名称');
         return false;
       }
       if (!params.rateName) {
         this.$message.warning('请填费率名称');
         return false;
       }
       if (!params.rate) {
         this.$message.warning('请填费率值');
         return false;
       }
       if (!params.rateRemark) {
         this.$message.warning('请填费率备注');
         return false;
       }
        console.log(params)

        updateProject(params).then((res) => {

          if (res) {
            this.$message.success('保存成功');
          }
        })
      },

    }
  }
</script>
